import { useState, useEffect } from 'react';
import { Cell, Avatar } from '@nutui/nutui-react-taro';
import { My } from '@nutui/icons-react-taro';
import Taro, { useDidShow } from '@tarojs/taro';
import { getToken } from '../../utils';
import { calculateDistance } from '../../utils/distanceUtils';
import { formatTime } from '../../utils/formatTime';
import { Api } from '../../api';

export default function ClockIn() {
  const [user, setUser] = useState<any>({});
  const [time, setTime] = useState(new Date());
  const [clockInRecord, setClockInRecord] = useState<any>({});
  const [location, setLocation] = useState<any>(null);
  const [isInRange, setIsInRange] = useState<boolean>(false);

  const hours = time.getHours().toString().padStart(2, '0');
  const minutes = time.getMinutes().toString().padStart(2, '0');
  const seconds = time.getSeconds().toString().padStart(2, '0');
  const officeLocation = {}; // 将 officeLocation 初始化为空对象用来接收数据库
  // const officeLocation = { latitude: 60.68394, longitude: 200.96101 };

  const handleClick = () => {
    if (clockInRecord.checkIn && clockInRecord.checkOut) {
      Taro.showToast({
        title: '今日已打卡',
      });
      return;
    }

    if (!location) {
      Taro.showToast({
        title: '请先获取定位信息',
        icon: 'none',
      });
      return;
    }

    if (!isInRange) {
      Taro.showToast({
        title: '请在办公地点范围内打卡',
        icon: 'none',
      });
      return;
    }

    const clockInTime = formatTime(new Date(), 'yyyy-MM-dd HH:mm:ss');
    const checkDate = formatTime(new Date(), 'yyyy-MM-dd');
    const clockInRecordItem = {
      checkDate: checkDate,
      employeeId: user.id,
      employeeName: user.employeeName,
      [clockInRecord.checkIn ? 'checkOut' : 'checkIn']: clockInTime,
      type: clockInRecord.checkIn ? '2' : '1', // 记录打卡类型上班 '1'或者下班 '2'
      location: location,//使用之前获取的位置信息。
    };

    Api.doAttendanceApi(clockInRecordItem).then((res: any) => {
      console.log('doAttendanceApi: ', res);
      if (res.data) {
        Taro.showToast({
          title: '打卡成功',
          icon: 'success',
        });
        setClockInRecord({ ...clockInRecord, ...clockInRecordItem });
        // setLocation(null);// 在打卡成功后清空位置信息
      } else {
        Taro.showToast({
          title: '打卡失败',
          icon: 'error',
        });
      }
    });
  };

  const getshow = () => {
    // 从数据库获取数据
    // const location = 'ccit'; // 替换为实际的 id
    // const location = 'cc'; // 替换为实际的 id
    const location = 'lib'; // 替换为实际的 id


    Api.getLocation(location)
      .then((response) => {
        console.log('完整的响应数据:', response.data); // 输出完整的响应数据
        if (response.data && response.data.data) {
          const databaseLatitude = response.data.data.latitude; // 从响应数据中获取数据库中的纬度
          const databaseLongitude = response.data.data.longitude; // 从响应数据中获取数据库中的经度
          console.log('获取响应数据:', databaseLatitude, databaseLongitude);
          const officeLocation = {
            latitude: databaseLatitude,
            longitude: databaseLongitude,
          };
          console.log('获取响应数据:', officeLocation);
          // 在这里可以使用 officeLocation 进行进一步的操作
  
          // 获取当前位置
          Taro.getLocation({
            type: 'gcj02',
            success(res) {
              const latitude = res.latitude;
              const longitude = res.longitude;
              console.log('纬度:', latitude);
              console.log('经度:', longitude);
  
              // 计算距离并判断是否在范围内
              const isInRange = calculateDistance(latitude, longitude, officeLocation.latitude, officeLocation.longitude) <= 0.5;
              setLocation({ latitude, longitude });
              setIsInRange(isInRange);
              console.log(isInRange);

              Taro.showToast({
                title: '获取位置成功',
                icon: 'success',
              });
            },
            fail(error) {
              console.error('获取位置失败：', error);
              Taro.showToast({
                title: '获取位置失败',
                icon: 'error',
              });
            },
          });
        } else {
          console.error('响应数据为空');
        }
      })
      .catch((error) => {
        console.error('获取位置失败:', error);
        // 处理错误情况
      });
  };
  
  //在组件挂载后立即执行
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);
    getshow(); // 调用 getshow 方法获取定位信息
    return () => clearInterval(interval);
  }, []);


  //用于在页面显示时执行相应的逻辑
  useDidShow(() => {
    const token: any = getToken();
    if (!token) {
      Taro.reLaunch({ url: '/pages/login/index' });
    }
    setUser(token);
    //调用接口 获取当天的打卡记录
    Api.getClockInRecordApi({
      employeeId: Number(token.id),
      checkDate: formatTime(new Date(), 'yyyy-MM-dd'),
    }).then((res: any) => {
      console.log('getClockInRecordApi: ', res);
      if (res.data) {
        setClockInRecord(res.data);
      }
    });

  });


  return (
    <div className="page-container flex flex-col">
      <Cell>
        <div className="flex flex-row items-center">
          <Avatar icon={<My />} shape="square" />
          <span className="ml-[10px]">{user?.employeeName}</span>
        </div>
      </Cell>

      <Cell align="center" className="flex flex-col justify-between items-center flex-1">
        <div className="w-full">
          <span className="text-14px mb-8px">上班时间：{clockInRecord.checkIn ? clockInRecord.checkIn : '未打卡'}</span>
          <span className="text-14px">下班时间：{clockInRecord.checkOut ? clockInRecord.checkOut : '未打卡'}</span>
        </div>

        <div
          onClick={handleClick}
          className="mb-50px h-140px w-140px bg-primary rounded-full flex  flex-col justify-center items-center text-white"
        >
          <span>{clockInRecord.checkIn ? '下班打卡' : '上班打卡'}</span>
          <span>{`${hours}:${minutes}:${seconds}`}</span>
        </div>

        <div className="">
          {/* <button onClick={getshow}>获取定位</button> */}
          {/* <span className="mb-8px text-desc">上班：08:30-下班17:30</span> */}
          {isInRange && <span className="mt-20px text-success">在办公地点范围内</span>}
          {!isInRange && <span className="mt-20px text-error">不在办公地点范围内</span>}
        </div>
      </Cell>
    </div>
  );
}